<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>切割轮播图</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .box {
      width: 640px;
      height: 360px;
      margin: 100px auto;
      position: relative;
    }

    .box>div {
      position: relative;
      float: left;
      width: 128px;
      height: 360px;
      transform-style: preserve-3d;
    }

    .box>div div {
      width: 128px;
      height: 360px;
      position: absolute;
      left: 0;
      top: 0;
    }

    /*设置动画延迟*/
    .box>div:nth-child(1) {
      transition: all 0.8s ease;
    }

    .box>div:nth-child(2) {
      transition: all 0.8s ease 0.1s;
    }

    .box>div:nth-child(3) {
      transition: all 0.8s ease 0.2s;
    }

    .box>div:nth-child(4) {
      transition: all 0.8s ease 0.3s;
    }

    .box>div:nth-child(5) {
      transition: all 0.8s ease 0.4s;
    }

    /*设置立方体*/
    .box>div>div:nth-child(1) {
      background: url("image/riven/1.jpg") no-repeat;
      transform: translateZ(180px);
    }

    .box>div>div:nth-child(2) {
      background: url("image/riven/2.jpg") no-repeat;
      transform: translateY(180px) rotateX(-90deg);
    }

    .box>div>div:nth-child(3) {
      background: url("image/riven/3.jpg") no-repeat;
      transform: translateZ(-180px) rotateX(180deg);
    }

    .box>div>div:nth-child(4) {
      background: url("image/riven/4.jpg") no-repeat;
      transform: translateY(-180px) rotateX(90deg);
    }

    /*设置图片定位*/
    .box>div:nth-child(1)>div {
      background-position: 0 0;
    }

    .box>div:nth-child(2)>div {
      background-position: -128px 0;
    }

    .box>div:nth-child(3)>div {
      background-position: -256px 0;
    }

    .box>div:nth-child(4)>div {
      background-position: -384px 0;
    }

    .box>div:nth-child(5)>div {
      background-position: -512px 0;
    }

    #btn1,
    #btn2 {
      position: absolute;
      height: 60px;
      width: 40px;
      line-height: 60px;
      top: 150px;
      font-size: 24px;
      font-weight: bold;
      color: #aaaaaa;
      background-color: white;
      border: none;
      text-align: center;
      transition: background-color, color, 0.8s ease;
    }

    #btn1:hover,
    #btn2:hover {
      background-color: #cccccc;
      cursor: pointer;
      color: #666666;
    }

    #btn1 {
      left: -50px;
    }

    #btn2 {
      right: -50px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="box">
    <div class="b1">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="b2">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="b3">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="b4">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="b5">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <span id="btn1">&lt;</span>
    <span id="btn2">&gt;</span>
  </div>
  <script>
    $(window).ready(function () {
      let deg = 0;
      $("#btn1").click(function () {
        deg += 90;
        $(".box>div").css({ "transform": "rotateX(" + deg + "deg)" })
      });
      $("#btn2").click(function () {
        deg -= 90;
        $(".box>div").css({ "transform": "rotateX(" + deg + "deg)" })
      })
    })
  </script>
</body>

</html>